<template>
  <div>
    <div class="search-box">
      <queryModel :queryList="queryList" @changeParams="getList"></queryModel>
    </div>
    <tablePage :tableData="tableData" :tableConfig="tableConfig" :pageIndex="queryParams.pageIndex" @changeParams="getList" v-loading="loading">
      <template v-slot:tankNo="{row}">
        <div class="item-box" v-for="item in row.customerRecords">{{item.tankNo}}</div>
      </template>
      <template v-slot:goodsName="{row}">
        <div class="item-box" v-for="item in row.customerRecords">{{item.goodsName}}</div>
      </template>
      <template v-slot:goodsCount="{row}">
        <div class="item-box" v-for="item in row.customerRecords">{{item.goodsCount}}</div>
      </template>
      <template v-slot:customerName="{row}">
        <el-button type="text" @click="router.push({name: 'oilDepotCustomerDetail',query: {id: row.customerId}})">{{row.customerName}}</el-button>
      </template>
    </tablePage>
  </div>
</template>

<script lang="ts">
import queryModel from '@/components/queryModel/index.vue'
import tablePage from '@/components/tablePage/index.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { defineComponent, reactive, ref } from 'vue'
import { getCustomerList } from '@/api/oilDepotCustomer'
import { queryGoodsDictionary } from '@/api/common'

export default defineComponent({
  name: 'oilDepotCustomer',
  components: {
    queryModel,
    tablePage
  },
  setup (props, context) {
    const router = useRouter()
    const queryList = [
      { type: 'text', field: 'customerName', maxlength: 20, options: { label: '客户', placeholder: '请输入客户' } },
      { type: 'select', field: 'emptyStorage', optionsKey: 'isStockList', options: { label: '是否有库存', placeholder: '请选择是否有库存' } }
    ]
    let tableData = ref([])
    const tableConfig = {
      columnList: [
        { slot: 'customerName', label: '客户', minWidth: 200 },
        { prop: 'goodsCount', label: '现有库存（吨）', minWidth: 120 },
        { slot: 'tankNo', label: '租用罐号', minWidth: 200 },
        { slot: 'goodsName', label: '货品', minWidth: 120 },
        { slot: 'goodsCount', label: '库存（吨）', minWidth: 120 },
        { prop: 'inCount', label: '入库次数', minWidth: 120 },
        { prop: 'outCount', label: '出库次数', minWidth: 120 },
        { prop: 'inAmount', label: '入库总数（吨）', minWidth: 120 },
        { prop: 'outAmount', label: '出库总数（吨）', minWidth: 120 }
      ],
      total: 0
    }
    const store = useStore()
    // 获取配置项
    const getConfig = async () => {
      const goodsRes = await queryGoodsDictionary()
      if (goodsRes.code === 200) {
        store.commit('setConfig', { goodsList: goodsRes.result })
      }
    }
    getConfig()
    // 获取列表数据
    let queryParams = reactive({
      pageIndex: 1,
      pageSize: 10
    })
    let loading = ref(false)
    const getList = async (params) => {
      loading.value = true
      Object.assign(queryParams, params)
      const { code, result, totalRow } = await getCustomerList({ ...queryParams })
      loading.value = false
      if (code !== 200) return
      tableConfig.total = totalRow
      tableData.value = result
    }
    getList({})
    return { router, queryList, tableData, tableConfig, loading, queryParams, getList }
  }
})

</script>

<style scoped lang="less">
  .search-box {
    padding-top: 18px;
    background: #ffffff;
    margin-bottom: 20px;
    border-radius: 8px;
    .tab-box {
      margin-bottom: 29px;
    }
  }
  .item-box {
    border-bottom: 1px solid #f2f2f2;
    padding: 3px 0;
    &:nth-last-child(1) {
      border: 0;
    }
  }
</style>
